<template>
  <view class="detail-container">
    <!-- 视频区域 -->
    <view class="video-section">
      <video
        :src="videoUrl"
        class="main-video "
        :poster="url('step', currentStep, 'png')"
        object-fit="cover"
        show-center-play-btn
      ></video>
      <view class="video-info">
        <text class="video-title"
          >{{ displaySteps[currentStep].title }}步骤详解</text
        >
        <text class="video-desc">{{ displaySteps[currentStep].content }}</text>
      </view>
    </view>

    <!-- 其他步骤列表 -->
    <view class="uni-pa-5">
      <text class="section-title text-center uni-my-4">
        <text class="title-icon">◈</text>
        制作步骤
      </text>

      <view class="steps-list">
        <view
          v-for="(step, index) in displaySteps"
          :key="index"
          class="step-item "
          :class="{ 
            active: currentStep === index,
            'disabled': loading
          }"
          @tap="switchStep(index)"
        >
          <image
            :src="url('vediocover',index, 'png')"
            class="step-image"
          />
          <view class="step-info">
            <view class="step-header">
              <text class="step-title">{{ step.title }}</text>
              <text class="step-number">步骤 {{ index + 1 }}</text>
            </view>
            <text class="step-desc">{{ step.content }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useCounterStore } from "@/stores/counter";

const url = $url;
const store = useCounterStore();
const { steparr } = store;

// 获取当前步骤索引
const currentStep = ref(0);
// 加载状态
const loading = ref(false);

// 过滤掉最后一个步骤
const displaySteps = computed(() => {
  return steparr.slice(0, -1);
});

// 示例视频URL
const videoUrl = ref("https://epoch.jxksd.top/image/vedio.mp4");

// 从路由参数获取初始步骤
onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  if (currentPage && currentPage.$page && currentPage.$page.options) {
    const stepIndex = parseInt(currentPage.$page.options.step);
    if (!isNaN(stepIndex) && stepIndex >= 0 && stepIndex < displaySteps.value.length) {
      currentStep.value = stepIndex;
    }
  }
});

// 切换步骤
const switchStep = (index) => {
  if (loading.value || currentStep.value === index) return;
  
  loading.value = true;
  uni.showLoading({
    title: '加载中...',
    mask: true
  });

  setTimeout(() => {
    currentStep.value = index;
    loading.value = false;
    uni.hideLoading();
  }, 1500); // 等待1.5秒
};
</script>

<style lang="scss" scoped>
.video-section {
  width: 100%;
  background: #fff;

  .main-video {
    width: 100%;
    height: 422rpx;
  }

  .video-info {
    padding: 30rpx;

    .video-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 16rpx;
      display: block;
    }

    .video-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.step-item {
  display: flex;

  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &.active {
    border: 1px dotted var(--td-brand-color);
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);

    .step-info {
      background: rgba(var(--td-brand-color-rgb), 0.05);

      .step-title {
        color: var(--td-brand-color);
      }
    }
  }

  &.disabled {
    opacity: 0.7;
    pointer-events: none;
  }

  .step-image {
    width: 240rpx;
    height: 220rpx;
    object-fit: cover;
  }

  .step-info {
    flex: 1;
    padding: 20rpx;

    .step-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      .step-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .step-number {
        font-size: 24rpx;
        color:var(--td-brand-color);
        background: #f5f5f5;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
      }
    }

    .step-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }

  &:active {
    opacity: 0.8;
  }
}

// 删除不需要的样式
.steps-scroll,
.steps-list {
  width: 100%;
}
</style>
